<form nz-form #f="ngForm">
  <nz-card [nzBordered]="false" nzTitle="列表定义">
    <se-container [col]="3">
      <se label="代码" required error="必填项，请输入">
        <input type="text" nz-input [(ngModel)]="data.code" name="code" required (ngModelChange)="codeChange()" />
      </se>
      <se label="名称" required error="必填项，请输入">
        <input type="text" nz-input [(ngModel)]="data.name" name="name" required (ngModelChange)="nameChange()" />
      </se>
      <se label="数据源类型" required error="必填项，请选择">
        <nz-select name="datasourceType" [(ngModel)]="data.datasourceType" [nzPlaceHolder]="'请选择数据源类型'" [nzShowSearch]="true">
          <nz-option *ngFor="let i of datasourceTypes" [nzLabel]="i.value!" [nzValue]="i.key"></nz-option>
        </nz-select>
      </se>
      <se *ngIf="data.datasourceType == 'URL'" required label="数据源" error="必填项，请输入">
        <input nz-input name="datasourceId" [(ngModel)]="data.datasourceId" placeholder="请输入数据源" />
      </se>
      <se *ngIf="data.datasourceType == 'SQL'" required label="数据源" eerror="必填项，请选择">
        <nz-select
          name="datasourceId"
          nzAllowClear
          nzShowSearch
          nzServerSearch
          [(ngModel)]="data.datasourceId"
          (nzOnSearch)="sqlOnSearch($event)"
        >
          <ng-container *ngFor="let o of sqlList">
            <nz-option *ngIf="!sqlLoading" [nzValue]="o.id" [nzLabel]="o.name!"></nz-option>
          </ng-container>
          <nz-option *ngIf="sqlLoading" nzDisabled nzCustomContent>
            <i nz-icon nzType="loading" class="loading-icon"></i>
            Loading Data...
          </nz-option>
        </nz-select>
      </se>
      <se label="操作栏">
        <nz-select name="action" nzShowSearch nzAllowClear nzMode="tags" [(ngModel)]="selectedActions" nzPlaceHolder="请输入操作栏">
          <nz-option *ngFor="let o of actions" [nzLabel]="o.name!" [nzValue]="o.code"></nz-option>
          <nz-option nzLabel="自定义"></nz-option>
        </nz-select>
      </se>
    </se-container>
  </nz-card>
</form>
